<!DOCTYPE html>
<html>

<head>
    <title>我的消息</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="/js/jquery/jquery.min.js"></script>
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.css">
    <script src="/js/bootstrap/js/bootstrap.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/message.css"/>
    <script src="/js/plugins/jrender/jrender.js"></script>
    <script src="/js/common.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog/dialog.css">
    <script src="/js/plugins/dialog/dialog.min.js"></script>


    <script>
        $(function () {
            var msg;
            var currentPage = 1;
            var pages;

            /*从session中获取用户id*/
            var userId = JSON.parse(sessionStorage.getItem("user")).id;
            $("#privateMessage").attr("href", "/mine/privateMessage.html?id=" + userId);
            $("#myPraise").attr("href","/mine/praiseMessage.html?id="+userId);
            $("#myComments").attr("href","/mine/commentMessage.html?id="+userId);

            /*查询未读消息数量*/
            $.get("/users/"+userId+"/counts",function (data) {
                console.log(data);
                $("#counts").renderValues({list:data});
                $("#pc").html(data[0]);
                $("#cc").html(data[1]);
                $("#mc").html(data[2]);
                $("#uc").html(data[3]);
            });

            /*渲染系统信息*/
            $.get("/systemMessages", {userId: userId}, function (data) {
                msg = data.list;
                pages = data.pages;
                renderView($(".systemMsg"), {list: msg});
            })
            /*翻页渲染*/
            $(window).scroll(function () {
                if (isEnd()) {
                    if (currentPage < pages) {
                        currentPage++;
                        $.get("/systemMessages", {userId: userId, currentPage: currentPage}, function (data) {
                            msg = $.merge(msg, data.list);
                            renderView($(".systemMsg"), {list: msg});
                        });
                    } else {
                        $(document).dialog({
                            type: "notice",
                            infoText: "没有更多骚扰信息了",
                            autoClose: 1000,
                            position: "center"
                        });
                    }


                }
            });


            /*点击系统通知,全部标记已读*/
            $("#system").click(function () {
                /*type2批量标记已读*/
                $.post("/systemMessages",{sid:null,userId:userId,type:2},function () {
                    location.reload();
                });
            });



            /*动态绑定点击事件,标记已读*/
            $(".systemMsg ").on("click", "a[data-sid]", function () {
                var sid = $(this).data("sid");
                /*type1,标记单个已读*/
                /*标记已读*/
                $.post(
                    "/systemMessages",
                    {sid: sid, userId: userId,type:1},function () {
                        location.reload();
                    }
                );
            });

            /*渲染的函数*/
            function renderView(ele, data) {
                ele.renderValues(data, {
                    handle: function (ele, value) {
                        if (!value) {
                            $(ele).css("display", "");
                        }
                    }
                })
            }
        })
    </script>
</head>

<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
            <span>我的消息</span>
        </div>
        <div class="col"></div>
    </div>
</div>
<div id="counts">
<ul class="list-group">
    <a id="myPraise">
        <li class="list-group-item d-flex justify-content-between align-items-center">
            <div class="item">
                <span><i class="fa fa-thumbs-o-up" ></i></span>
                <span>赞</span>
                <span class="badge badge-danger badge-pill" id="pc"></span>
            </div>
            <i class="fa fa-chevron-right"></i>
        </li>
    </a>

    <a id="myComments">
        <li class="list-group-item d-flex justify-content-between align-items-center">
            <div class="item">
                <span><i class="fa fa-commenting-o"></i>	</span>
                <span>评论</span>
                <span class="badge badge-danger badge-pill" id="cc"></span>
            </div>
            <i class="fa fa-chevron-right"></i>
        </li>
    </a>
    <a id="privateMessage">
        <li class="list-group-item d-flex justify-content-between align-items-center">
            <div class="item">
                <span><i class="fa fa-envelope-o"></i></span>
                <span>	私信</span>
                <span class="badge badge-danger badge-pill" id="mc"></span>
            </div>
            <i class="fa fa-chevron-right"></i>
        </li>
    </a>
    <a role="button" id="system">
        <li class="list-group-item d-flex justify-content-between align-items-center">
            <div class="item">
                <span><i class="fa fa-bell"></i></span>
                <span>系统通知</span>
                <span class="badge badge-danger badge-pill" id="uc"></span>
            </div>
        </li>
    </a>
</ul>
</div>
<!--系统信息-->
<div class="container systemMsg">
    <dl class="itemList" render-loop="list">
        <a role="button" render-attr="data-sid=list.id">
            <dd>
                <p render-html="list.content"></p>
                <p>
                    <span render-html="list.sendTime"></span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span class="badge badge-pill badge-danger readMark"
                          render-key="list.state" render-fun="handle" style="display: none"
                    >未读</span>
                </p>
            </dd>
        </a>
    </dl>
</div>

</body>

</html>